<template>
  <div style="padding: 22px 10px 10px">
    <h4 class="labelmtitle">标签管理</h4>
    <!-- <a-button type="primary" @click="addshowModal">+ 创建新标签</a-button> -->
    <div> <NewTabs @ok="getTagoption"></NewTabs></div>
    <div>
      {{labelList}}
    </div>
    <br/>
  <!-- 删除标签 -->
  <a-row>
    <a-col :span="18">
        <a-select
        v-model:value="deletetabs.tabs"
        mode="tags"
        style="width: 90%"
        placeholder="选择标签"
        :options="tagoption"
        ></a-select>
    </a-col>
    <a-col :span="6">
      
        <a-button type="primary" @click="deletetab">删除标签</a-button>
    </a-col>

  </a-row>

    <a-modal v-model:visible="addvisible" title="增添" @ok="addhandleOk">
      <!--自定义组件-->
      <div>
        <div class="laitem">
          <div class="latitle">
            <span>标签名:</span>
          </div>
          <div class="laname-input">
            <a-input v-model:value="namevalue" placeholder="标签" />
          </div>
        </div>
      </div>
      <!--自定义组件-->
    </a-modal>

    <div>
      <div class="userm">
        <div
          style="
            height: auto;
            width: 48%;
            display: flex;
            box-shadow: 0px 0px 15px -10px gray;
            margin-top: 10px;
          "
          v-for="label in labelList" :key="labelList.id"
        >
          <div class="labelInfo">
            <li class="labelName">标签名：<span>{{label.name}}</span></li>
            <!-- <li class="labelBiog"ID：<span>828190.213</span></li> -->
          </div>

          <div class="labelButton" style="display:none">
            <a-dropdown>
              <template #overlay>
                <a-menu @click="handleMenuClick">
                  <a-menu-item key="1" @click="showModal">修改</a-menu-item>
                  <a-modal
                    v-model:visible="visible"
                    title="修改"
                    @ok="handleOk"
                  >
                    <!--自定义组件-->
                    <div>
                      <div class="laitem">
                        <div class="latitle">
                          <span>标签名:</span>
                        </div>
                        <div class="laname-input">
                          <a-input
                            v-model:value="namevalue"
                            placeholder="标签"
                          />
                        </div>
                      </div>
                    </div>
                    <!--自定义组件-->
                  </a-modal>

                  <a-menu-item key="2">删除</a-menu-item>
                </a-menu>
              </template>
              <a-button>
                操作
                <DownOutlined />
              </a-button>
            </a-dropdown>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs, ref } from "vue";
import NewTabs from '@/views/post/NewTabs.vue'
import {
  MailOutlined,
  CalendarOutlined,
  AppstoreOutlined,
  SettingOutlined,
} from "@ant-design/icons-vue";
import { get, post, tip } from "@/common";  
export default defineComponent({
  components: {
    MailOutlined,
    CalendarOutlined,
    AppstoreOutlined,
    SettingOutlined,
    NewTabs,
  },

  setup() {
    const state = reactive({
      selectedKeys: [],
      openKeys: [],
    });

    const handleClick = (menuInfo) => {
      console.log("click ", menuInfo);
    };

    return { ...toRefs(state), handleClick };
  },

  setup() {
    const visible = ref(false);
    const addvisible = ref(false);


    const showModal = () => {
      visible.value = true;
    };

    const handleOk = (e) => {
      console.log(e);
      visible.value = false;
    };

    const addshowModal = () => {
      addvisible.value = true;
    };

    const addhandleOk = (e) => {
      console.log(e);
      addvisible.value = false;
    };
        //标签显示
    let tagoption = ref([
      { value: "", label: "" },
      { value: "", label: "" },
    ]);

    const labelList = ref([]);

    const deletetabs=ref({
      tabs:[],
      postId:"",
    });  

    const deletetab=()=>{
      console.log(deletetabs.value);
      post("/post/deletetabs",deletetabs.value).then((res) => {
        
        getTagoption();
      })
    };
        //填充tagoption
    const getTagoption = () => {
      post("/post/selectalltabs").then((res) => {
        var tmps2 = [];
        for (let i = 0; i < res.data.length; i++) {
          var tmp2 = { value: "", label: "" };
          tmp2.value = res.data[i].id;
          tmp2.label = res.data[i].name;
          tmps2.push(tmp2);
          console.log(tmps2);
        }
        labelList.value = res.data;
        tagoption.value = tmps2;
        console.log(tagoption.value);
        console.log(labelList.value);
      })

      .catch((err) => {
        console.log(err);
      })
    };
    getTagoption();

    return {
      visible,
      addvisible,
      showModal,
      handleOk,
      addshowModal,
      addhandleOk,
      tagoption,
      deletetabs,
      deletetab,
      getTagoption,
    };
  },
});
</script>

<style>
.labelmtitle {
  font-size: 22px;
  border-left: 3px solid rgba(0, 0, 0, 0.8);
  padding-left: 8px;
  line-height: 16px;
  margin-bottom: 15px;
  font-weight: normal;
  margin-top: 10px;
  text-align: left;
}

.userm {
  padding: 10px 10px 10px;
}

.laitem {
  padding: 10px 5px 10px;
  display: flex;
  margin-left: 50px;
}

.latitle {
  height: 32px;
  width: 75px;
  font-size: 14px;
  float: left;
  display: flex;
  align-items: center;
}

.laname-input {
  float: left;
  width: 300px;
}

.labelInfo {
  width: 350px;
  height: 100px;
  padding: 4px;
  list-style-type: none;
  padding: 22px 10px 10px;
}

.labelInfo-state {
  width: 500px;
  height: 100px;
  padding: 4px;
  list-style-type: none;
  padding: 22px 10px 10px;
}

.labelName {
  color: #000;
  font-size: 14px;
  font-weight: normal;
  margin-right: -2px;
  overflow: hidden;
  vertical-align: -2px;
}

.labelBiog {
  color: #000;
  font-size: 14px;
  margin-top: 10px;
  line-height: 18px;
}

.labelButton {
  display: flex;
  align-items: center;
  padding: 10px 0px 10px;
  margin-right: 15px;
}
</style>